<template>
  <div>
    <!-- vxe 检索表单 -->
    <vxe-form
      :data="formSearchDataCom"
      title-width="120"
      title-align="right"
      @submit="searchEvent"
      @reset="resetSearchEvent"
    >

      <vxe-form-item
        field="data_date"
        :title="$t('baseCurveset.date')"
        span="12"
        :item-render="{
          name: 'ElDatePicker',
          props: {
            size: 'small',
            type:'daterange',
            rangeSeparator:'-',
            startPlaceholder:$t('base.startDate'),
            endPlaceholder:$t('base.endDate'),
            valueFormat:'yyyy-MM-dd'
            }
          }"
      >
      </vxe-form-item>

      <vxe-form-item
        field="dept_code"
        title="dept"
        span="12"
        :item-render="{
          name: 'ElCascader',
          props: {
            size: 'small',
            options:deptCodeOptions,
            props: { emitPath: false ,checkStrictly: true}
          }
        }"
      >
      </vxe-form-item>


      <vxe-form-item
        field="cp_code"
        title="cp"
        span="12"
        :item-render="{name: 'ElSelect', options: cpCodeOptions, props: { filterable:true,}}"
      >
      </vxe-form-item>

      <!-- <vxe-form-item
        field="project"
        title="project"
        span="12"
        :item-render="{name: 'ElSelect', options: dateTypeOptions,}"
        >
        </vxe-form-item> -->

      <!-- <vxe-form-item 
        field="data_date" 
        :title="$t('baseCurveset.date')" 
        span="12" 
        :item-render="{
          name: 'ElDatePicker',
          props: {
            size: 'small',
            type:'daterange',
            rangeSeparator:'-',
            startPlaceholder:$t('base.startDate'),
            endPlaceholder:$t('base.endDate'),
            valueFormat:'yyyy-MM-dd'
            }
          }"
      >
      </vxe-form-item> -->

      <!--
        vxe-form-item  属性和事件
        title-prefix
        item-render 项渲染器配置项
       -->
      <!-- <vxe-form-item
        field="title"
        title="标题"
        span="8"
        :title-prefix="{ message: '模糊匹配', icon: 'fa fa-exclamation-circle' }"
        :item-render="{name: 'ElInput',props: {size: 'small'}}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
        field="xsown"
        title="水电费"
        span="8"
      >
      <vxe-pulldown ref="xDown4" transfer>
          <template v-slot>
            <vxe-input v-model="value4" suffix-icon="fa fa-search" placeholder="实现下拉分页表格" @keyup="keyupEvent4" @focus="focusEvent4" @suffix-click="suffixClick4"></vxe-input>
          </template>
          <template v-slot:dropdown>
            <div class="my-dropdown4">
              <vxe-grid
              size="mini"
                highlight-hover-row
                stripe
                align="center"
                border="outer"
                show-overflow
                :checkbox-config="{showHeader:true,trigger:'row',reserve:true}"
                auto-resize
                height="300"
                :loading="loading4"
                :pager-config="tablePage4"
                :data="tableData4"
                :columns="tableColumn4"
                @cell-click="cellClickEvent4"
                @page-change="pageChangeEvent4">
              </vxe-grid>
            </div>
          </template>
        </vxe-pulldown>
      </vxe-form-item> -->


      <!-- <vxe-form-item
      field="role"
      title="ElAutocomplete"
      span="8"
      :item-render="{name: 'ElAutocomplete', props: {fetchSuggestions: roleFetchSuggestions}}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
        field="age"
        title="ElInputNumber"
        span="8"
        :item-render="{name: 'ElInputNumber'}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="sex"
      title="ElSelect"
      span="8"
      :item-render="{name: 'ElSelect', options: sexList}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="region"
      title="ElCascader"
      span="8"
      :item-render="{name: 'ElCascader', props: {options: regionList}}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="date"
      title="ElDatePicker"
      span="8"
      :item-render="{name: 'ElDatePicker', props: {type: 'date', format: 'yyyy/MM/dd'}}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="date5"
      title="ElTimeSelect"
      span="8" folding
      :item-render="{name: 'ElTimeSelect', props: {pickerOptions: {start: '08:30', step: '00:15', end: '18:30'}}}"
      > -->
      <!-- </vxe-form-item>
      <vxe-form-item
      field="flag"
      title="ElSwitch"
      span="8" folding
      :item-render="{name: 'ElSwitch'}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="slider"
      title="ElSlider"
      span="8" folding
      :item-render="{name: 'ElSlider'}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="rate"
      title="ElRate"
      span="8" folding
      :item-render="{name: 'ElRate'}"
      >
      </vxe-form-item> -->

      <!-- <vxe-form-item
      field="flag1"
      title="ElRadio"
      span="8"
      folding
      :item-render="{name: 'ElRadio', options: [{label: '是', value: 'Y'}, {label: '否', value: 'N'}]}"
      >
      </vxe-form-item> -->
      <!--
        visible-method  该方法的返回值用来决定该项是否显示
        folding 默认收起
       -->
      <!-- <vxe-form-item
      field="checkedList"
      title="ElCheckbox"
      span="8"
      folding
      :visible-method="visibleMethod"
      :item-render="{name: 'ElCheckbox', options: [{label: '北京', value: 'beijing'}, {label: '深圳', value: 'shenzhen'}, {label: '上海', value: 'shanghai'}]}"
      >
      </vxe-form-item> -->
      <!-- 渲染查询重置按钮 -->
      <!--
      collapse-node  折叠节点（展开=》收起）
       -->
      <vxe-form-item
        span="24"
        align="center"
        :item-render="{name: 'ElButtons', children: [{ content: '查询', props: {type: 'primary', nativeType: 'submit',size:'mini'} }, { content: '重置', props: {nativeType: 'reset',size:'mini'} }]}"
      >
      </vxe-form-item>

    </vxe-form>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

export default {
  name: 'articleSearchForm',
  components: {
    //PageHeaderLayout,
  },
  // 定义属性
  data() {
    return {
      // productOptions:[
      //   {
      //     label:'日报',
      //     value:'tdate'
      //   },{
      //     label:'月报',
      //     value:'tmonth'
      //   }
      // ]
    }
  },
  props: {
    formSearchData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    deptCodeOptions: {
      type: Array
    },
    cpCodeOptions: {
      type: Array
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    formSearchDataCom: {
      get() {
        return this.formSearchData
      },
      set(val) {
        this.$emit('update:formSearchData', val)
      }
    },
    // formSearchDataCom_data_date(){
    //   return this.formSearchDataCom.data_date
    // }
  },
  // 监控data中的数据变化
  watch: {
    formSearchData: {
      handler(nVal, oVal) {
        this.$emit('dataDateChange', nVal.data_date)
      },
      immediate: false,
      deep: true
    }
  },
  // 方法集合
  methods: {
    searchEvent() {
      // alert('searchEvent')
      this.$emit('searchEventEmit')
    },
    resetSearchEvent() {
      // alert('resetSearchEvent')
      this.$emit('resetSearchEventEmit')
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>

</style>